import { createElement, FC, memo } from 'react';
import { IMenuItem } from '@todo/core';
import Typography from '@mui/joy/Typography';
import { useRoute } from 'react-router5';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import Toggler from './Toggler.tsx';
import ListItem from '@mui/joy/ListItem';
import ListItemButton from '@mui/joy/ListItemButton';
import ListItemContent from '@mui/joy/ListItemContent';
import List from '@mui/joy/List';

interface IProps {
  menuList: IMenuItem[];
  navigate: (path: string) => void;
  t: (key: string) => string;
}

/**
 * Компонент для построения меню из конфигурации роутера.
 */
const FullMenuView: FC<IProps> = ({ menuList, navigate, t }) => {
  const onNavigate = (path: string) => () => {
    navigate(path);
  };
  const routerState = useRoute();

  return (
    <>
      {menuList.map((page) => {
        const isSelected = routerState.route.name === page.navigate?.path;
        const isExpanded =
          page.children && routerState.route.name.split('.')[0] === page.path;

        return (
          <ListItem key={page.id} nested={Boolean(page.children)}>
            {!page.children && (
              <ListItemButton
                role="menuitem"
                component="a"
                onClick={onNavigate(page.path)}
                selected={isSelected}
              >
                {/*// @ts-ignore              */}
                {page.icon && createElement(page.icon)}

                <ListItemContent>
                  <Typography level="title-sm">{t(page.text)}</Typography>
                </ListItemContent>
              </ListItemButton>
            )}
            {page.children && (
              <Toggler
                defaultExpanded={isExpanded}
                renderToggle={({ open, setOpen }) => (
                  <ListItemButton onClick={() => setOpen(!open)}>
                    {/*// @ts-ignore              */}
                    {page.icon && createElement(page.icon)}
                    <ListItemContent>
                      <Typography level="title-sm">{t(page.text)}</Typography>
                    </ListItemContent>
                    <KeyboardArrowDownIcon
                      sx={{ transform: open ? 'rotate(180deg)' : 'none' }}
                    />
                  </ListItemButton>
                )}
              >
                <List sx={{ gap: 0.5 }}>
                  {page.children.map((child) => (
                    <ListItem key={child.id}>
                      <ListItemButton
                        role="menuitem"
                        component="a"
                        onClick={onNavigate(child.navigate?.path || '')}
                        selected={
                          routerState.route.name === child.navigate?.path
                        }
                      >
                        {t(child.text)}
                      </ListItemButton>
                    </ListItem>
                  ))}
                </List>
              </Toggler>
            )}
          </ListItem>
        );
      })}
    </>
  );
};

export default memo(FullMenuView);
